<route lang="json5">
  {
    style: {
      navigationBarTitleText: '示例',
    },
  }
</route>

<template>
  <view class="page">
    <gi-sticky>
      <sar-search shape="round" placeholder="请输入关键词" search="搜索"></sar-search>
    </gi-sticky>

    <sar-pull-down-refresh
      ref="pullDownRefreshRef"
      :loading="loading"
      @refresh="onRefresh"
    >
      <sar-card v-for="i in 10" :key="i" title="卡片标题" :root-style="{ margin: '10px 10px 0' }">
        <template #extra>
          <sar-tag theme="warning">审核中</sar-tag>
        </template>
        <view>
          Trumpet, suona, small song, large cavity. The official ships are in chaos,
          all because of your bid. The army listened to the army, and the people
          listened to the people. Where to tell what is true and what is false? The
          sight blows over this house, blows the other one, only blows the water all
          the geese fly!
        </view>
        <template #footer>
          <gi-space justify="end">
            <sar-button type="mild" size="mini" :root-style="{ width: '80px', flexGrow: 0 }">审批</sar-button>
            <sar-button size="mini" :root-style="{ width: '80px', flexGrow: 0 }">编辑</sar-button>
          </gi-space>
        </template>
      </sar-card>

      <gi-gap></gi-gap>

      <sar-load-more status="loading"></sar-load-more>
    </sar-pull-down-refresh>
  </view>
</template>

<script lang='ts' setup>
const loading = ref(false)
const pullDownRefreshRef = ref()

onPageScroll(({ scrollTop }) => {
  pullDownRefreshRef.value?.enableToRefresh(scrollTop === 0)
})

function fetchApi() {
  return new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve()
    }, 1000)
  })
}

async function onRefresh() {
  loading.value = true
  await fetchApi()
  loading.value = false
}
</script>

<style lang='scss' scoped>

</style>
